<template lang="html">
<div class="home-container">
  <el-row class="container">
    <el-col :span="24" class="header">
        <el-col :span="10" class="logo" :class="'logo-width'">
          <el-col class="logo-title">{{sysName}}</el-col>
        </el-col>
    </el-col>
    <el-col :span="24" class="guide">
      <div class="guide-content">
<!--        <div class="guide-desc">-->
<!--          <ul>-->
<!--            <li>批量导出</li>-->
<!--            <li>合并打印</li>-->
<!--            <li>邮件筛选</li>-->
<!--            <li>智能分类</li>-->
<!--          </ul>-->
<!--        </div>-->
        <el-image :src="guide" class="guide-img"></el-image>
        <div class="guide-choose">
          <div class="guide-choose-title">
            <div class="choose-title">选择身份体验电子发票</div>
          </div>
          <div class="choose">
            <div class="choose-item" @click="index">
              <i class="el-icon-my-free"></i>
              <div class="content">
                <div class="title">功能查看</div>
                <div class="desc">试用功能效果</div>
              </div>
            </div>
            <div class="choose-item" @click="singlePay">
              <i class="el-icon-my-single"></i>
              <div class="content">
                <div class="title">单次使用</div>
                <div class="desc">购买单次/新用户优享</div>
              </div>
            </div>
            <div class="choose-item" @click="vipPay">
              <i class="el-icon-my-vip"></i>
              <div class="content">
                <div class="title">成为VIP</div>
                <div class="desc">购买会员包月使用</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
 </el-row>
</div>
</template>

<script>
import * as commonApi from "api/common";
import userImg from "../assets/img/head.jpg";
import guide from "../assets/img/guide.png";
import {baseUrl} from 'config/index.js'

export default {
  components: {},
  data() {
    return {
      guide: guide,
      userImg: userImg,
      sysName: "发票打印助手",
    };
  },
  created() {

  },
  computed: {
  },
  mounted() {

  },
  methods: {
    index() {
      this.$router.push("/invoice/invoiceList")
    },
    singlePay() {
      this.$router.push({name:'mine', params:{activeName: 'second'}})
    },
    vipPay() {
      this.$router.push({name:'mine', params:{activeName: 'second'}})
    },
  }
};
</script>

<style scoped lang="scss">
@import "../assets/css/them.scss";

@media screen and (max-width: 1200px){
  .home-container{
    background-color: #F5F6FB;
    height: 100%;
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("../assets/img/back-img.png") no-repeat;
      background-size: 100%;
      .header {
        height: 40px;
        line-height: 40px;
        background: $globalColor;
        color: #fff;

        .logo-width {
          text-align: center;
          width: 150px;
          color: $baseColor;
          .logo-title {
            display: inline-block;
            color: $baseFontColor;
            font-weight: 500;
            line-height: 40px;
            font-size: 18px;
            height: 40px;
          }
        }

      }
      .guide{
        text-align: center;
        margin-top: 25px;
        .guide-content{
          display: inline-block;
          width: calc(100% - 200px);
          .guide-desc{
            width: 150px;
            color: red;
            position: absolute;
            z-index: 9999;
            top: 120px;
          }
          .guide-img{
            z-index: 999;
          }
          .guide-choose{
            width: 100%;
            background: $globalColor;
            position: relative;
            bottom: 65px;
            z-index: 99;
            border-bottom-right-radius:20px;
            border-bottom-left-radius:20px;
            display: table;
            padding-bottom: 10px;
            .guide-choose-title{
              height: 65px;
              text-align: left;
              .choose-title{
                font-size:16px;
                font-weight:400;
                color:$baseFontColor;
                line-height:18px;
                position: absolute;
                top: 45px;
                left: 78px;
              }
            }
            .choose{
              .choose-item:first-child{
                margin: 10px 20px 10px 78px;
              }
              .choose-item:hover{
                background: $baseBgColor;
              }
              .choose-item{
                display: flex;
                padding: 15px;
                width: 22%;
                margin: 10px 16px;
                float: left;
                background: #F7F7FA;
                border-radius:20px;
                cursor: pointer;

                /*ivon 图标样式*/
                .el-icon-my-free {
                  background: url("../assets/img/mianfei.png") center no-repeat;
                  background-size: 40px;
                  line-height: 40px;
                  width: 40px;
                  margin-right: 4px;
                }
                .el-icon-my-free:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-single{
                  background: url("../assets/img/danci.png") center no-repeat;
                  background-size: 40px;
                  width: 40px;
                  line-height: 40px;
                  margin-right: 4px;
                }
                .el-icon-my-single:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip{
                  background: url("../assets/img/VIP.png") center no-repeat;
                  width: 40px;
                  background-size: 40px;
                  line-height: 40px;
                  margin-right: 4px;
                }
                .el-icon-my-vip:before {
                  content: "替";
                  visibility: hidden;
                }
                .content{
                  padding-left: 5%;
                  -webkit-box-flex: 1;
                  -webkit-flex: 1;
                  flex: 1;
                  text-align: left;
                  .title{
                    line-height: 25px;
                    font-size:14px;
                    font-weight:500;
                  }
                  .desc{
                    color: #666666;
                    font-size:12px;
                    font-weight:400;
                    line-height: 25px
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width:1200px) and (max-width:1600px){
  .home-container{
    background-color: #F5F6FB;
    height: 100%;
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("../assets/img/back-img.png") no-repeat;
      background-size: 100%;
      .header {
        height: 40px;
        line-height: 40px;
        background: $globalColor;
        color: #fff;

        .logo-width {
          text-align: center;
          width: 150px;
          color: $baseColor;
          .logo-title {
            display: inline-block;
            color: $baseFontColor;
            font-weight: 500;
            line-height: 40px;
            font-size: 18px;
            height: 40px;
          }
        }

      }
      .guide{
        text-align: center;
        margin-top: 60px;
        .guide-content{
          display: inline-block;
          width: calc(100% - 200px);
          .guide-desc{
            width: 150px;
            color: red;
            position: absolute;
            z-index: 9999;
            top: 120px;
          }
          .guide-img{
            z-index: 999;
          }
          .guide-choose{
            width: 100%;
            background: $globalColor;
            position: relative;
            bottom: 65px;
            z-index: 99;
            border-bottom-right-radius:20px;
            border-bottom-left-radius:20px;
            display: table;
            padding-bottom: 10px;
            .guide-choose-title{
              height: 65px;
              text-align: left;
              .choose-title{
                font-size:16px;
                font-weight:400;
                color:$baseFontColor;
                line-height:18px;
                position: absolute;
                top: 45px;
                left: 78px;
              }
            }
            .choose{
              .choose-item:first-child{
                margin: 10px 20px 10px 78px;
              }
              .choose-item:hover{
                background: $baseBgColor;
              }
              .choose-item{
                display: flex;
                padding: 20px;
                width: 22%;
                margin: 10px 24px;
                float: left;
                background: #F7F7FA;
                border-radius:20px;
                cursor: pointer;

                /*ivon 图标样式*/
                .el-icon-my-free {
                  width: 50px;
                  background: url("../assets/img/mianfei.png") center no-repeat;
                  background-size: 50px;
                  line-height: 50px;
                  margin-right: 8px;
                }
                .el-icon-my-free:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-single{
                  width: 50px;
                  background: url("../assets/img/danci.png") center no-repeat;
                  background-size: 50px;
                  line-height: 50px;
                  margin-right: 8px;
                }
                .el-icon-my-single:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip{
                  width: 50px;
                  background: url("../assets/img/VIP.png") center no-repeat;
                  background-size: 50px;
                  line-height: 50px;
                  margin-right: 8px;
                }
                .el-icon-my-vip:before {
                  content: "替";
                  visibility: hidden;
                }
                .content{
                  padding-left: 5%;
                  -webkit-box-flex: 1;
                  -webkit-flex: 1;
                  flex: 1;
                  text-align: left;
                  .title{
                    line-height: 25px;
                    font-size:18px;
                    font-weight:500;
                  }
                  .desc{
                    color: #666666;
                    font-size:16px;
                    font-weight:400;
                    line-height: 25px
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 1600px){
  .home-container{
    background-color: #F5F6FB;
    height: 100%;
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("../assets/img/back-img.png") no-repeat;
      background-size: 100%;
      .header {
        height: 60px;
        line-height: 60px;
        background: $globalColor;
        color: #fff;
        .logo {
          height: 60px;
          font-size: 22px;
        }
        .logo-width {
          text-align: center;
          width: 180px;
          color: $baseColor;
          .logo-title {
            display: inline-block;
            color: $baseFontColor;
            font-weight: 500;
            line-height: 60px;
            font-size: 22px;
            width: 180px;
            height: 60px;
          }
        }

      }
      .guide{
        text-align: center;
        margin-top: 80px;
        .guide-content{
          display: inline-block;
          /*.guide-desc{*/
          /*  width: 150px;*/
          /*  color: #ffffff;*/
          /*  position: absolute;*/
          /*  z-index: 9999;*/
          /*  top: 250px;*/
          /*  left: calc(30% - 200px);*/
          /*  font-size:18px;*/
          /*  font-weight:400;*/
          /*  ul{*/
          /*    li{*/
          /*      text-align: left;*/
          /*      margin-top: 20px;*/
          /*    }*/
          /*  }*/
          /*}*/
          .guide-img{
            z-index: 999;
          }
          .guide-choose{
            width: 100%;
            background: $globalColor;
            position: relative;
            bottom: 65px;
            z-index: 99;
            border-bottom-right-radius:20px;
            border-bottom-left-radius:20px;
            display: table;
            padding-bottom: 10px;
            .guide-choose-title{
              height: 65px;
              text-align: left;
              .choose-title{
                font-size:16px;
                font-weight:400;
                color:$baseFontColor;
                line-height:18px;
                position: absolute;
                top: 45px;
                left: 78px;
              }
            }
            .choose{
              .choose-item:first-child{
                margin: 20px 20px 20px 78px;
              }
              .choose-item:hover{
                background: $baseBgColor;
              }
              .choose-item{
                display: flex;
                padding: 20px;
                width: 270px;
                margin: 20px 32px;
                float: left;
                background: #F7F7FA;
                border-radius:20px;
                cursor: pointer;

                /*ivon 图标样式*/
                .el-icon-my-free {
                  width: 50px;
                  background: url("../assets/img/mianfei.png") center no-repeat;
                  background-size: 50px;
                  line-height: 50px;
                  margin-right: 16px;
                }
                .el-icon-my-free:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-single{
                  width: 50px;
                  background: url("../assets/img/danci.png") center no-repeat;
                  background-size: 50px;
                  line-height: 50px;
                  margin-right: 16px;
                }
                .el-icon-my-single:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip{
                  width: 50px;
                  background: url("../assets/img/VIP.png") center no-repeat;
                  background-size: 50px;
                  line-height: 50px;
                  margin-right: 16px;
                }
                .el-icon-my-vip:before {
                  content: "替";
                  visibility: hidden;
                }
                .content{
                  padding-left: 5%;
                  -webkit-box-flex: 1;
                  -webkit-flex: 1;
                  flex: 1;
                  text-align: left;
                  .title{
                    line-height: 25px;
                    font-size:18px;
                    font-weight:500;
                  }
                  .desc{
                    color: #666666;
                    font-size:16px;
                    font-weight:400;
                    line-height: 25px
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


</style>
